<template>
  <div class="guidance-edit-view-page">
    <div class="view-page-header">
      <h2 class="title">智能导诊编辑</h2>
    </div>

    <div class="add-form-container">
      <Form :model="form" :rules="formRules" label-position="right" :label-width="80" ref="form">
        <div class="form-section">
          <p class="section-title">基本信息</p>
          <Row :gutter="16" class="row">
            <Col span="8">
            <FormItem prop="postionType" label="身体部位:">
              <Select v-model="form.postionType" placeholder="请选择身体部位">
                <Option v-for="item in bodyParts"
                        :value="item.code"
                        :key="item.code"
                        style='text-align:center;'
                    >{{ item.name }}</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem prop="symptom" label="症状名称:">
              <Input placeholder="输入症状名称" :maxlength="30" v-model="form.symptom" />
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem prop="gender" label="适合人群:">
              <Select v-model="form.gender" placeholder="请选择适合人群">
                <Option v-for="item in crowds"
                        :value="item.code"
                        :key="item.code"
                        style='text-align:center;'
                    >{{ item.name }}</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="16">
            <FormItem prop="synopsis" label="症状描述:">
              <Input placeholder="请输入症状描述" type="textarea"  v-model="form.synopsis"/>
            </FormItem>
            </Col>
          </Row>
        </div>

        <div class="form-section">
          <p class="section-title">推荐科室</p>
          <Row :gutter="16" class="row">
            <Col span="24">
            <FormItem :label-width="0" prop="dept">
              <Transfer
                :titles="['可选科室', '已选科室']"
                filterable
                :data="deptData"
                :target-keys="deptTargetKeys"
                :list-style="{ width: '300px', height: '400px' }"
                @on-change="onChangeDeptTransfer"
              ></Transfer>
            </FormItem>
            </Col>
          </Row>
        </div>
      </Form>
    </div>
    <div class="view-page-footer">
      <Button @click="onSubmit" type="primary" class="button" :disabled="disabledSave">
        保存
      </Button>
      <Button @click="onCancel" class="button">
        取消
      </Button>
    </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  data() {
    return {
      bodyParts:[],
      crowds:[{"code":0,"name":"所有"},{"code":1,"name":"男"},{"code":2,"name":"女"}],
      form: {
        symptomDepts:[],
      },
      disabledSave: false,
      formRules: {
         postionType: [
          {
            required: true,
            message: "请选择身体部位",
            trigger: "blur"
          }
        ],
        symptom: [
          {
            required: true,
            message: "症状名称必填",
            trigger: "blur"
          }
        ]
      },
      deptData: [
        /* { key: '1', label: '神经外科' },
        { key: '2', label: '皮肤科科' },
        { key: '3', label: '五官科科' },
        { key: '4', label: '妇科' },
        { key: '5', label: '内科' } */
      ],
      deptTargetKeys: []
    };
  },
  mounted() {
    let id = this.$route.query.id;
    if (id) {
        this.$axios.get(api.prefixSymptom+id).then(res => {
            if (res.data.code) {
                this.form = res.data.object;
                if(this.form.symptomDepts){
                  this.form.symptomDepts.forEach(element=>{
                    let key = element.deptType;
                    this.deptTargetKeys.push(key);
                  });
                }
            }
        }).catch(error=>{
          this.$Message.info("详情获取错误");
        });
    }
    this.getBodyParts();
    this.getAllDepts();
  },
  methods: {
    getBodyParts() {
        this.$axios.post(api.queryBodyParts, {}).then(res => {
            if (res.data.code) {
                let ret = res.data.object;
                if(ret){
                    this.bodyParts = ret;
                }
            } 
        }).catch(() => {
			    console.log('身体部位获取失败');
        });
    },
    getAllDepts() {
        this.$axios.post(api.queryAllSecondDepts, {}).then(res => {
            if (res.data.code) {
                let ret = res.data.object;
                if(ret){
                    this.deptData = ret;
                }
            } 
        }).catch(() => {
			    console.log('科室获取失败');
        });
    },
    onChangeDeptTransfer(e){
      this.deptTargetKeys = e
    },
    onCancel(){
      this.$router.go(-1)
    },
    // 返回
    back() {
        let query = this.$route.query;
        this.functionJS.queryNavgationTo(
            this,
            "/index/publicOperation/guidance/list",
            query
        );
    },
    onSubmit(){
      this.disabledSave = true
      this.$refs.form.validate().then(valid => {
        if(valid){
          //ID
          this.form.id = this.$route.query.id;
          // 获取 选择科室
          this.form.deptCodes = this.deptTargetKeys;

          this.$axios
          .post(api.editSymptom, this.form)
          .then(res => {
              if (res.data.code) {
                  this.$Message.info("修改成功");                                  
                  this.disabledSave = false
                  this.back()
              } else {
                  this.disabledSave = false
                  this.$Message.info(res.data.message);
              }
          })
          .catch(err => {
              console.log(err);
          });
        }

      });
    }
  }
};
</script>

<style scoped lang="less">
.guidance-edit-view-page {
  padding: 10px 0px;
  background-color: #fff;

  .view-page-header {
    .title {
      margin: 10px 0;
      font-weight: bold;
      text-align: center;
    }
  }

  .view-page-footer {
    margin: 20px 0;
    text-align: center;
    .button{
      margin: 0 10px;
    }
  }

  .add-form-container {
    .form-section {
      width: 98%;
      display: flex;
      flex-direction: column;
      margin: 10px auto;
      border: 1px solid #f0f0f0;
      box-shadow: 0 4px 3px #ebedf8;
      border-radius: 5px;
      margin-bottom: 20px;

      .section-title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;
      }

      .row{
        padding: 0 16px;
      }
    }
  }
}
</style>
